<template>
  <div class="app">
    <div class="app-title">
      <h3>新型冠状肺炎实时监测</h3>
      <p>{{time}}</p>
    </div>
    <div class="app-top">
     <apptopleft></apptopleft>
     <apptopcon></apptopcon>
     <apptopright></apptopright>
    </div>
  </div>
  <router-view />
</template>

<script setup>
import apptopleft from "./components/apptopleft.vue"
import apptopcon from "./components/apptopcon.vue"
import apptopright from "./components/apptopright.vue"
import {ref, reactive, toRefs} from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
import dayjs from "dayjs";//时间转换插件
import { onMounted, onBeforeUnmount } from "vue";

let timer = 0;
let time = ref("");

onMounted(() => {
 timer = setInterval(() => {
 //设置定时器
 getTime(); //自定义事件
 }, 1000);
});

onBeforeUnmount(() => {
 clearInterval(timer); //清除定时器
 timer = 0;
});

const getTime = () => {
 time.value = dayjs().format("YYYY年MM月DD日-HH时mm分ss秒");
}
const router = useRouter()
const route = useRoute()
const store = useStore()
const data=reactive({})
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.app {
  background-image: url(../public/img/bg.a6333996.jpg);
  width: 1920px;
  height: 1110px;
  background-size: 100% 100%;
  .app-title {
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 30px;
    line-height: 80px;
    width: 100%;
    height: 100px;
    text-align: center;
    color: #fff;
    background-image: url(../public/img/head_bg.eeff3da5.png);
    background-size: 100% 100%;
  }
  .app-top{
    display: flex;
    height: calc(1110px - 100px);
    color: #fff;
  }
}
</style>
